<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/frameCss/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
	</head>
	<body>
		<header></header>
		
		<div id="scheduleList-container">
				<div class="explain">
					<p>红色日期表示当天有演出，点击查看详情</p>
				</div>
				<div class="week">
					<ul>
						<li style="color: #FF0000;">日</li>
						<li>一</li>
						<li>二</li>
						<li>三</li>
						<li>四</li>
						<li>五</li>
						<li style="color: #FF0000;">六</li>
					</ul>
				</div>
				<div class="chooseDate-wrapper">
					<div class="chooseDate">
					</div>
				</div>
		</div>
		
		<script src="../js/frameJS/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/frameJS/iscroll/build/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/frameJS/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//加载公共头部
				$('header').load('../commonTemplate/common-header.html');
				
				//引用iScroll并调用
				function loaded() {
					var myScroll = new IScroll('.chooseDate-wrapper', {
						scrollbars: false,
						mouseWheel: true,
						interactiveScrollbars: true,
						shrinkScrollbars: 'scale',
						fadeScrollbars: true,
						//click:true防止点击事件或a标签失效
						click: true,
					});
				}
				window.setTimeout(loaded, 100);
				
				//添加日期
				function addDay() {
					$.get('../json/date.txt', function(res) {
						var JSONobj = JSON.parse(res)
						console.log(JSONobj)
						for(var i = 0; i < JSONobj.data.length; i++) {
							var dayArr = JSONobj.data[i].day.split(",")
							//console.log(dayArr);

							var $choosenDateBox = $('<div class="choosenDate-box"></div>');
							var $li = ''

							$.each(dayArr, function(index, val) {
								var li = '<li><a href="javascript:void(0);">' + val + '</a></li>'
								$li += li
							});

							var $p = '<p class="YearAndMonth">' + JSONobj.data[i].year + '</p>'
							var $ul = '<ul class="dayList">' + $li + '</ul>'

							$choosenDateBox.html($p + $ul)
							$('#scheduleList-container .chooseDate').append($choosenDateBox)
						}

					})
				}
				addDay();
				
				//把没内容的li标签变成span标签，便于后续操作
				function changeLabel(){
					$('li','.dayList').each(function(index){
						if($(this).text() == ''){
							$(this).replaceWith('<span>'+''+'</span>').addClass('noSee')
						}
					})
				}
				
				//有演出当天红字表示
				function toRed(){
					$('li a','.dayList').eq(10).css({'color':'#ff0000'}).attr('href','../wholeList/todayList.html');
					$('li a','.dayList').eq(18).css({'color':'#ff0000'}).attr('href','../wholeList/todayList.html');
					$('li a','.dayList').eq(28).css({'color':'#ff0000'}).attr('href','../wholeList/todayList.html');
				}
				
				//渲染数据原因，需要延迟100ms才能执行其他方法
				window.setTimeout(function() {
					changeLabel();
					toRed();
				}, 100)
			})
		</script>
	</body>
</html>
